<template>
  <div class="detail">
    <div class="verify_info box">
      <div class="box_title">
        <span class="text">变更审核</span>
      </div>
      <div class="box_info">
        <div class="left">用户状态(变更后)</div>
        <div class="right">{{ userStatusName }}</div>
      </div>
      <div class="box_info">
        <div class="left">变更原因</div>
        <div class="right">{{ formDataAuit.changeReason }}</div>
      </div>
      <!-- <div class="box_info">
        <div class="left">审核结果</div>
        <div class="right">审核通过</div>
      </div> -->
      <div class="box_info">
        <div class="left">审核结果</div>
        <div class="right">
          <van-radio-group
            v-model="formDataAuit.auditStatus"
            direction="horizontal"
            :disabled="[2, 3].includes(auditStatus)"
            @change="handleResChange">
            <van-radio :name="2">通过</van-radio>
            <van-radio :name="3">不通过</van-radio>
          </van-radio-group>
        </div>
      </div>
      <template v-if="formDataAuit.userStatus == 4 && formDataAuit.auditStatus == 2">
        <div class="box_info">
          <div class="left">调离结果</div>
          <div class="right">
            <van-radio-group
              v-model="formDataAuit.inOut"
              direction="horizontal"
              :disabled="[2, 3].includes(auditStatus)"
              @change="handleInOutChange">
              <van-radio :name="1">镜湖区内</van-radio>
              <van-radio :name="2">镜湖区外</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="box_info" v-if="formDataAuit.inOut == 1">
          <div class="left">更改所属机构</div>
          <div class="right">
            <div
              class="depart_list_val"
              :class="{ fitClass: pickerValueY }"
              @click="onPickerShow(0)"
              v-if="![2, 3].includes(auditStatus)">
              {{ pickerValueY ? pickerValueY : '请选择机构' }}
              <van-icon name="arrow-down" size="16" />
            </div>
            <div v-else class="depart_list_val">
              {{ orgOrgIdName }}
            </div>
            <van-popup v-model="showPickerY" round position="bottom">
              <van-picker
                show-toolbar
                :columns="columnsOrg"
                value-key="orgAlias"
                @change="onChange1"
                @cancel="showPickerY = false"
                @confirm="onConfirmY" />
            </van-popup>
          </div>
        </div>
        <!-- <div class="box_info" v-if="formDataAuit.inOut == 1">
          <div class="left">更改所属职位</div>
          <div class="right">
            <div
              v-if="![2, 3].includes(auditStatus)"
              class="depart_list_val"
              :class="{ fitClass: pickerValueQ }"
              @click="onPickerShow(1)"
            >
              {{ pickerValueQ ? pickerValueQ : '请选择职位' }}
              <van-icon name="arrow-down" size="16" />
            </div>
            <div v-else class="depart_list_val">
              {{ orgPostIdName }}
            </div>
            <van-popup v-model="showPickerQ" round position="bottom">
              <van-picker
                show-toolbar
                :columns="columnsPost"
                default-index="0"
                value-key="postName"
                @cancel="showPickerQ = false"
                @confirm="onConfirmQ"
              />
            </van-popup>
          </div>
        </div> -->
      </template>
      <div class="box_info opinion">
        <div class="left">审核意见</div>
        <div class="right">
          <van-field
            v-model="formDataAuit.auditReason"
            rows="3"
            autosize
            type="textarea"
            placeholder="请输入审核意见"
            maxlength="200"
            :show-word-limit="![2, 3].includes(auditStatus)"
            :readonly="[2, 3].includes(auditStatus)" />
        </div>
      </div>
      <van-button
        v-if="![2, 3].includes(auditStatus)"
        @click="setData"
        class="subbmit"
        type="default"
        :loading="subLoading"
        :disabled="subLoading"
        loading-text="提交中...">
        提交
      </van-button>
    </div>
  </div>
</template>

<script>
import { listCodeData, listRecursiveOrgan, listUiasOrgPost } from '@api/user.js'
import { getDetail, updateUserStataus, getInOrgPostId } from '@api/api-democratic.js'
import MyNavBar from '@com/MyNavBar'
export default {
  name: 'userNotificationDetail',
  components: { MyNavBar },
  props: {
    /* 右侧用户信息 */
    userDetails: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      tenantId: localStorage.tenantId,
      formDataAuit: {
        inOut: 1,
        orgPostListIn: [],
        orgPostListInForm: {
          orgId: '',
          orgPostId: '',
        },
        orgPostListOut: [],
      },
      id: this.$route.query.id,
      userId: this.$route.query.userId,
      orgId: this.$route.query.orgId,
      needDealId: this.$route.query.needDealId,
      orgName: localStorage.userInfo ? JSON.parse(localStorage.userInfo).loginPostInfo.orgName : '',
      subLoading: false,
      userStatusList: [],
      rules: {
        auditStatus: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
        auditReason: [{ required: true, message: '请输入审核意见', trigger: 'blur' }],
      },
      auditStatus: '',
      showPickerY: false,
      columnsOrg: [],
      pickerValueY: '',
      showPickerQ: false,
      columnsPost: [],
      pickerValueQ: '',
    }
  },
  computed: {
    userStatusName() {
      for (let i = 0; i < this.userStatusList.length; i++) {
        const item = this.userStatusList[i]
        if (item.code == this.formDataAuit.userStatus) {
          return item.name
        }
      }
    },
    auditStatusName() {
      return this.formDataAuit.auditStatus == 2 ? '通过' : '不通过'
    },
    /* 职位名称翻译 */
    orgOrgIdName() {
      if (this.columnsOrg.length != 0) {
        let orgIdItem = this.columnsOrg[1].values.filter(item => item.id == this.formDataAuit.orgPostListInForm.orgId)
        if (orgIdItem.length !== 0) {
          return orgIdItem[0].orgAlias
        }
      }
    },
    /* 职位名称翻译 */
    orgPostIdName() {
      let postIdItem = this.columnsPost.filter(item => item.id == this.formDataAuit.orgPostListInForm.orgPostId)
      if (postIdItem.length !== 0) {
        return postIdItem[0].postName
      }
    },
  },
  watch: {},
  created() {
    this.initListCodeDatadata('user_status')
    this.initAuitdata()
    this.initlistRecursiveOrgandata()
  },
  mounted() {},
  methods: {
    /* 初始化人员数据 */
    initAuitdata() {
      getDetail({
        id: this.id,
      }).then(res => {
        if (res.status == 200) {
          this.formDataAuit = { ...this.formDataAuit, ...res.data }
          this.auditStatus = this.formDataAuit.auditStatus
          if (this.formDataAuit.orgPostListIn && this.formDataAuit.orgPostListIn.length > 0) {
            this.formDataAuit.inOut = 1
            let { orgId, orgPostId } = this.formDataAuit.orgPostListIn[0]
            this.initlistUiasOrgPostdata(orgId)
            this.formDataAuit.orgPostListInForm.orgId = orgId
            this.formDataAuit.orgPostListInForm.orgPostId = orgPostId
          } else {
            if (this.auditStatus == 2) {
              this.formDataAuit.inOut = 2
            }
          }
        }
      })
    },
    /* 初始化参数配置 */
    initListCodeDatadata(codeType) {
      listCodeData({ codeType: codeType }).then(res => {
        if (res.status == 200) {
          if (codeType == 'user_status') {
            this.userStatusList = res.data
          }
        }
      })
    },
    /* 选择 */
    onPickerShow(type) {
      if (type == 0) {
        this.showPickerY = true
      } else {
        if (this.formDataAuit.orgPostListInForm.orgId) {
          this.showPickerQ = true
        } else {
          this.$toast.fail('请先选择机构')
        }
      }
    },
    // 机构切换
    onConfirmY(value) {
      this.pickerValueY = `${value[0].orgAlias}/${value[1].orgAlias}`
      this.formDataAuit.orgPostListInForm.orgId = value[1].id
      this.initlistUiasOrgPostdata(value[1].id)
      this.getInOrgPostId(value[1].id)
      this.showPickerY = false
    },
    // 职位切换
    onConfirmQ(value) {
      this.pickerValueQ = value.postName
      this.formDataAuit.orgPostListInForm.orgPostId = value.id
      this.showPickerQ = false
    },
    /* 机构信息 */
    initlistRecursiveOrgandata() {
      listRecursiveOrgan({
        tenantId: this.tenantId,
      }).then(res => {
        let { status, data } = res
        if (status == 200) {
          // this.orgOptionsList = [...data];
          this.test1(data)
        }
      })
    },
    onChange1(picker, values) {
      // picker.setColumnValues(1, this.citys[values[0]]);
      picker.setColumnValues(1, this.window[values[0].orgAlias])
    },
    test1(dataSource) {
      let data_com = dataSource
      this.floor = dataSource
      let window = {}
      data_com.forEach(function (v, i, origin) {
        if (!window[v.orgAlias]) {
          window[v.orgAlias] = []
          v.queryOutVOS.forEach(function (vv, ii, origin_son) {
            window[v.orgAlias].push(vv)
          })
        }
      })
      this.window = window
      this.columnsOrg = [
        {
          values: this.floor,
          className: 'column1',
        },
        {
          values: window[this.floor[0].orgAlias],
          className: 'column2',
        },
      ]
    },
    /* 获取原机构的职位信息 */
    getInOrgPostId(orgId) {
      getInOrgPostId({
        id: this.id,
        orgId: orgId,
      }).then(res => {
        let { status, data } = res
        if (status == 200) {
          this.formDataAuit.orgPostListInForm.orgPostId = data
          if (data) {
            let orgPostIdList = this.columnsPost.filter(item => item.id == data)
            if (orgPostIdList.length != 0) {
              this.pickerValueQ = orgPostIdList[0].postName
            }
          } else {
            this.pickerValueQ = ''
          }
        }
      })
    },
    /* 获取职位信息 */
    initlistUiasOrgPostdata(orgId) {
      listUiasOrgPost({
        pageNum: 1,
        pageSize: 10000,
        orgId: orgId,
        tenantId: this.tenantId,
      }).then(res => {
        let { status, data } = res
        if (status == 200) {
          this.columnsPost = [...data.content]
        }
      })
    },
    /* 监听通过不通过 */
    handleResChange(e) {
      if (this.formDataAuit.userStatus == 4 && e == 3) {
        this.pickerValueY = ''
        this.pickerValueQ = ''
        this.formDataAuit.orgPostListInForm.orgId = ''
        this.formDataAuit.orgPostListInForm.orgPostId = ''
      }
    },
    /* 监听内外radio */
    handleInOutChange(e) {
      if (e == 2) {
        this.pickerValueY = ''
        this.pickerValueQ = ''
        this.formDataAuit.orgPostListInForm.orgId = ''
        this.formDataAuit.orgPostListInForm.orgPostId = ''
      }
    },
    /* 提交前处理数据 */
    setData(type) {
      if (!this.formDataAuit.auditStatus) {
        this.$toast.fail('请选择审核结果')
        return false
      }
      if (this.formDataAuit.userStatus == 4 && this.formDataAuit.auditStatus == 2 && this.formDataAuit.inOut == 1) {
        if (!this.formDataAuit.orgPostListInForm.orgId) {
          this.$toast.fail('请选择所属机构')
          return false
        }
        // if (!this.formDataAuit.orgPostListInForm.orgPostId) {
        //   this.$toast.fail('请选择所属职位')
        //   return false
        // }
      }
      if (!this.formDataAuit.auditReason) {
        this.$toast.fail('请输入审核意见')
        return false
      }
      this.submitData()
    },
    /* 提交数据 */
    submitData() {
      this.subLoading = true
      this.formDataAuit.orgId = this.orgId
      this.formDataAuit.userName = this.userDetails.userName
      this.formDataAuit.needDealId = this.needDealId

      this.formDataAuit.orgPostListOut = [...this.userDetails.orgPostList]
      if (this.formDataAuit.auditStatus == 2 && this.formDataAuit.inOut == 1) {
        this.formDataAuit.orgPostListIn = [{ ...this.formDataAuit.orgPostListInForm }]
      }
      // console.log(this.formDataAuit);

      updateUserStataus({ ...this.formDataAuit }).then(res => {
        this.subLoading = false
        if (res.status == 200) {
          // this.$toast.success('提交成功');
          this.$dialog
            .alert({
              message: `提交成功`,
              closeOnClickOverlay: true,
            })
            .then(() => {
              this.$router.go(-1)
            })
        }
      })
      setTimeout(() => {
        this.subLoading = false
      }, 6000)
    },
  },
}
</script>

<style lang="scss" scoped>
.detail {
  padding: 0 14px 14px;
  background-color: #f0f0f0;
  font-size: 13px;
  color: #333333;
  .box {
    padding: 14px;
    background-color: #ffffff;
    border-radius: 5px;
    .box_title {
      font-size: 16px;
      color: #333;
      margin: 10px 0;
      font-weight: bold;
      .text {
        background-image: linear-gradient(#ffffff 50%, #f9f1e8);
      }
    }
    .box_info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #efefef;
      .left {
        font-size: 14px;
      }
    }
  }
  .verify_info {
    .box_info {
      flex-wrap: wrap;
      .right {
        padding: 5px 0;
      }
      /deep/.van-radio-group {
        .van-radio {
          margin-left: 20px;
          font-size: 13px;
          .van-radio__icon {
            font-size: 14px;
          }
          .van-radio__icon--checked .van-icon {
            background-color: #5f7290;
            border-color: #5f7290;
          }
        }
      }
    }
    .opinion {
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      .right {
        width: 100%;
      }
    }
    .subbmit {
      color: #56462c;
      // font-size: 14px;
      height: 36px;
      line-height: 36px;
      background-color: #0f61d5;
      font-weight: bold;
      border-radius: 4px;
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 15px auto 0;
    }
  }
}
</style>
